<template>
    <div style="height:100%">
        <!-- :imgPoint="imgPoint"  -->
        <commonLayout @getData="getData" :drawer="drawer" @closeDrawer="closeDrawer" :review="review"
            :devSubsystem="formSearch.drawerSubsystem" :deviceBrand="formSearch.deviceBrand" :url="imgPoint.url"
            :restore="restore" @getNewpoint="getNewpoint">

            <template slot="btn">
                <el-upload class="upload-demo" :action="uploadPath" :before-upload="beforeUpload" ref="upload"
                    :on-success="onSuccess" :show-file-list='false' :limit="1" :on-error="onError">
                    <el-button size="small" type="primary">修改底图</el-button>
                </el-upload>
            </template>

            <template slot="search">
                <div class="searchForm">
                    <!-- 图例  提示 -->
                    <!-- <tips></tips> -->

                    <div class="form">
                        <!-- <el-button size="mini" type="warning" class="">编辑</el-button> -->
                        <el-button size="mini" type="primary" @click="save">保存</el-button>
                        <el-button size="mini" type="success" class="el-icon-plus" @click="addDevice">添加设备
                        </el-button>
                        <el-button size="mini" type="info" @click="restore = true" class="el-icon-refresh-left">
                        </el-button>
                        <el-form :model="formSearch" class="form_demo" :inline='true' size="small">
                            <el-form-item label="系统" class="devForm">
                                <el-select v-model="formSearch.drawerSubsystem" @change="changeSelect" placeholder="请选择系统">
                                    <el-option v-for="item in subsystemList" :key="item.keyId"
                                        :label="item.systemType" :value="item.keyId"></el-option>
                                </el-select>
                            </el-form-item>
                            <span style="color:red; font-size:14px;">* 注:当前绑点子系统</span>
                        </el-form>
                    </div>
                </div>
            </template>

            <template slot="data">
                <div>
                    <devicelistv :devicedata="devicedata"></devicelistv>
                </div>
            </template>
            <template slot="device">
                <div>
                    <deviceCard :devicedata="devicedata">

                    </deviceCard>
                </div>
            </template>

        </commonLayout>
    </div>
</template>

<script>
import commonLayout from '../common_layout.vue';
import tips from '../legend_tips.vue';
// import doorDevInfo from '../yunmenjin/acs_dev.vue';
// import videoList from '../video_monitoring/homeVideoList.vue';
// import parking from '../parking/carDevs.vue';
// import mapping from '../invade_sys/deviceMapping.vue';
// import fire from '../fire_sys/fire.vue';
import deviceCard from '../device_control_card.vue'
import devicelistv from '../device_list_v.vue'

import {
    // ibmswritecommand,
    // ibmsreadcommand,
    getPointBySecId,
    uploadFloorImg,
    getFloorImg,
    deviceBindPoint,
    // getDeviceType,
    // getDoorDevList,
    systemList,
} from '../../../url/api';
export default {
    data() {
        return {
            isOnce:true,
            spaceData: {},
            subsystemList: [],
            restore: false,
            uploadPath: '/api/v1.0/file/upload/file',
            review: false,
            devBrandList: [], //设备品牌
            formSearch: {
                drawerSubsystem: '', // 设备系统
                deviceBrand: '', // 设备类型
                xqId: '',
            },
            tableData: [],
            drawer: false,
            imgPoint: {
                url: '',
            },
            options: [],
            devName: '',
            value: '',
            sectionId: null,
            params: {},
            tableFlag: 1,
            spaceTypeMap: {
                0: 'project',
                1: 'section',
                2: 'house',
            },
            devicedata:[],
            editX:0,
            editY:0,
            editName:''
        };
    },
    methods: {
        onSuccess(response, file, fileList) {
            console.log(response, file, fileList);
            if (response.ok) {
                uploadFloorImg({
                    mapUrl: response.data[0],
                    projectId: this.params.xqId,
                    spaceId: this.sectionId,
                    spaceType: this.spaceTypeMap[`${this.params.checkSectionValue.type}`],
                    subsystems: this.params.subsystemList.map(
                        (item) => item.keyId
                    ),
                }).then((res) => {
                    if (res.data.ok ) {
                        let params = {
                            spaceId: this.spaceData.id,
                            spaceType: this.spaceTypeMap[`${this.spaceData.type}`],
                            subsystem: this.formSearch.drawerSubsystem,
                        };
                        console.log(this.spaceData);
                        // params.keyId = this.formSearch.drawerSubsystem;
                        // console.log('bind.vue___', params);
                        this.getImg(params);
                        this.$message.success('修改成功');
                        this.$refs.upload.clearFiles(); //上传成功之后清除历史记录
                    }
                });
            }
        },
        beforeUpload(file) {
            if (!this.params.xqId && !this.params.sectionId) {
                this.$message.error('请先选择小区和区域');
                return false;
            }
        },
        onError(err, file, fileList) {
            // console.log(err,file,fileList);
            this.$message.error(err);
        },
        /* 选择系统  抽屉 */
        changeSelect(type) {
            this.tableFlag = type;
            // //debugger
            this.refreshPoint()
        },
        // 通过类型返回系统
        getSystemName(type) {
            let obj = {
                1: '监控',
                2: '门禁',
                3: '停车场',
                4: '安防报警-公区',
                5: '安防报警-室内',
                6: '火灾报警',
            };
            return obj[`${type}`];
        },
        getNewpoint(val){
            let { editX, editY,deviceName } = val;
            this.editX = editX
            this.editY = editY
            this.editName = deviceName
        },
        save() {

            let {
                tsf: { chaX, chaY, zoom },
                checkSectionValue,
                list,
                pointList
            } = this.params;
            let params = {
                mapDevices:[],//[deviceId,deviceName,transportProtocol,x,y]
                // subSystem:list[0].devSubsystem,
                subSystem:this.formSearch.drawerSubsystem,
                spaceType:this.spaceTypeMap[`${checkSectionValue.type}`],
                spaceId:checkSectionValue.id,
                projectId:this.formSearch.xqId
            }
            //debugger
            // if (!this.params.list.length) {
            //     this.$message.error('请先添加设备');
            //     return;
            // }
            console.log('保存列表', list, pointList);
            if(this.params.list){
                console.log("here",this.params);
                console.log("here",this.params.list);
                this.params.list.forEach((item) => {
                    let obj = {
                        x:item.x,
                        y:item.y,
                        transportProtocol:item.transportProtocol,
                        deviceName:item.name,
                        deviceId:item.devSn || item.deviceId || item.indexCode || item.endpointId,
                        extra:item.indexCode,//监控设备对应url 暂时用设备名称作为标识
                    }
                    params.mapDevices.push(obj);
                });
                console.log('处理成功的列表', params.mapDevices);
                console.log('看看保存参数——————————————————',params);
                params.mapDevices = params.mapDevices.concat(this.params.pointList)
            }else{
                if(this.editName){
                    this.params.pointList = this.params.pointList.map(item => {
                        if (item.deviceName === this.editName) {
                            item.x = this.editX
                            item.y = this.editY
                        }
                        return item;
                    });
                }
                params.mapDevices = this.params.pointList
            }
            if(!this.params.pointList && !this.params.list){
                params.mapDevices = []
            }
            // if(!params.mapDevices.length){
            //     this.$message('请先添加设备点位')
            //     return;
            // }
            //debugger
            deviceBindPoint(params).then((res) => {
                if (res.data.ok ) {
                    this.review = true;
                    this.$message.success('绑定成功！');
                    if (!chaX) chaX = 0;
                    if (!chaY) chaY = 0;
                    if (!zoom) zoom = 1;
                    setTimeout(() => {
                        this.review = false;
                    }, 300);
                }
            });
        },
        addDevice() {
            if (this.sectionId='') {
                this.$message.error('请先选择区域', this.sectionId);
                return;
            }
            // if (!this.imgPoint.url) {
            if (!this.params.addDevFlag) {
                this.$message.error('请先上传底图');
                return;
            }

            this.drawer = true;
        },
        //关闭抽屉
        closeDrawer(val) {
            this.drawer = val;
        },
        //传过来的数据 小区id  区域id
        getData(val) {
            // //debugger
            let { xqId, sectionId } = val;
            this.params = val;
            this.sectionId = sectionId;
            this.formSearch.xqId = xqId;
            // console.log('bind.vue________________getData', val);
            this.subsystemList = val.subsystemList;
            // //debugger
            if(this.isOnce){
                this.formSearch.drawerSubsystem = this.subsystemList[0].keyId;
                this.isOnce = false;
            }
            this.restore = false;
            this.spaceData = val.checkSectionValue;
            // //debugger
            this.$nextTick(() => {
                this.refreshPoint();
            })
            
        },
        refreshPoint() {
            // //debugger
            if(!this.formSearch.xqId){
                return
            }
                getPointBySecId({
                    projectId: this.formSearch.xqId,
                    spaceId: this.spaceData.id,
                    spaceType: this.spaceTypeMap[`${this.spaceData.type}`],
                    subsystem: this.formSearch.drawerSubsystem,
                    // subsystem:this.keyId
                }).then((res) => {
                    if (res.data.ok ) {
                        this.devicedata = res.data.data;
                        // console.log(this.devicedata,res,"AAAAAAAAAAAAAAAAAA");
                        sessionStorage.setItem('devicedata',JSON.stringify(this.devicedata))
                    }
                });
        },
        getImg(params) {
            console.log('bind_getImg_params', params);
            getFloorImg(params).then((res) => {
                console.log('获取图片', res.data.ok, res.data.data);
                if (res.data.ok  && res.data.data) {
                    this.imgPoint.url = res.data.data.baseMap;
                } else {
                    // this.$set(this.imgPoint, 'url', '');
                    this.imgPoint.url = '';
                }
                this.$forceUpdate();
            });
        },
        // getDoorList() {
        //     getDoorDevList({
        //         size: 10,
        //         current: 1,
        //         xqId: this.formSearch.xqId,
        //     }).then((res) => {
        //         if (res.data.ok ) {
        //             this.tableData = res.data.data.records;
        //         }
        //     });
        // },
        getSubsystemList() {
            systemList({}).then((res) => {
                if (res.data.ok ) {
                    this.subsystemList = res.data.data;
                    // //debugger
                    if(this.isOnce){
                        this.formSearch.drawerSubsystem = this.subsystemList[0].keyId;
                        this.isOnce = false;
                    }
                    // console.log('subSystemList__________', this.subsystemList);
                    // this.saveParams.subsystemList = this.subsystemList;
                    // this.$emit('getData', this.saveParams);
                }
            });
        },
    },
    watch: {
        sectionId(val, oldVal) {
            if (!val) this.tableData = [];
        },
    },
    mounted() {
        this.getSubsystemList();
    },
    components: {
        commonLayout,
        tips,
        // doorDevInfo,
        // videoList,
        // parking,
        // mapping,
        // fire,
        deviceCard,
        devicelistv
    },
};
</script>

<style scoped lang='scss'>
.form_demo {
    display: inline-block;
    height: 100%;
    padding-left: 10px;
    & /deep/ .el-input__inner {
        width: 135px;
    }
}
.searchForm {
    display: flex;
    text-align: right;
    height: 100%;
    .point {
        flex: 3;
    }
    .form {
        flex: 7;
        padding-right: 10px;
        & /deep/ .marginLeft10 {
            width: 156px;
        }
        & /deep/ .el-form-item__content {
            vertical-align: middle;
            // width: 140px;
        }
    }
}
.img {
    width: 100%;
    height: 100%;
    // background-image: url('../../assets/images/cad/a3_a4_1f.png');
    background-size: cover;
}
.statusIcon {
    $statusIcon: 20px;
    display: inline-block;
    width: $statusIcon;
    height: $statusIcon;
    // border-radius: $statusIcon;
    // line-height: 10px;
    vertical-align: middle;
    border-radius: 50%;
}
.statusIcon:nth-child(1) {
    background: #1f807f;
    // background-size: 100% 100%;
}
.statusIcon:nth-child(2) {
    background: #f70000;
    // background-size: 100% 100%;
}
.statusIcon:nth-child(3) {
    background: #c3c3c3;
    // background-size: 100% 100%;
}
// .marginLeft10 {
//     margin-left: 10px;
//     width: none !important;
// }
// .marginLeft10 + .el-input {
//     width: none !important;
// }
</style>